<template>
  <div class="saas-pick">
    <div
      class="text"
      :class="{ placeholder: value === placeholder || value === '' }"
      :style="{ fontSize: fontSize, textAlign: textAlign }"
      @tap="openPicker"
    >
      {{ value ? value : placeholder }}
    </div>
    <uni-transition
      :mode-class="['fade']"
      :styles="maskClass"
      :show="mask_show"
      @tip="closeMask"
    />
    <uni-transition
      :duration="500"
      :mode-class="['fade', 'slide-bottom']"
      :styles="transfromClass"
      :show="mask_show"
      @tap="closeMask"
    >
      <div
        class="pick--view"
        @tap.stop=""
      >
        <div class="view__list">
          <div
            v-for="(item, index) in datas"
            :key="index"
            class="view__list--item"
            @tap.stop="changePick(item)"
          >
            {{ nameKey?item[nameKey]:item }}
          </div>
        </div>
        <div class="view__line" />
        <div
          class="view__cancel"
          @tap="closeMask"
        >
          取消
        </div>
      </div>
    </uni-transition>
  </div>
</template>

<script>
import uniTransition from "./UniTransition";

export default {
	name: "Pick",
	components: {
		uniTransition,
	},
	props: {
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false,
		},
		// 数据源
		datas: {
			type: Array,
			default: ()=>[]
		},
		placeholder: {
			type: String,
			default: "请选择分类",
		},
		textAlign: {
			type: String,
			default: "",
		},
		// 因为动态绑定问题不兼容upx 以下值使用rpx  详情见https://www.jianshu.com/p/97dc7c4a5ebf
		fontSize: {
			type: String,
			default: "30rpx",
		},

		// 如果数据为object  这里传入要显示的值的主键  如值为 obj.name  那这里传入name
  
		nameKey: {
			type: String,
			default: "",
		},
		defaultValue:{
			type: String,
			default: "",
		}
	},
	data() {
		return {
			mask_show: false,
			value: "",
		};
	},
	computed: {
		indicatorStyle() {
			return `height: ${Math.round(
				uni.getSystemInfoSync().screenWidth / (750 / 80)
			)}px;`;
		},
		maskClass() {
			return {
				position: "fixed",
				bottom: 0,
				top: 0,
				left: 0,
				right: 0,
				"z-index": 9,
				"background-color": "rgba(0, 0, 0, 0.4)",
			};
		},
		transfromClass() {
			return {
				position: "fixed",
				bottom: 0,
				top: 0,
				left: 0,
				right: 0,
				"z-index": 999,
				/* #ifndef APP-NVUE */
				display: "flex",
				/* #endif */
				"justify-content": "center",
				"align-items": "flex-end",
			};
		},
	},
	beforeMount() {
		if(this.defaultValue){
			this.value = this.defaultValue;
		}
	},
	methods: {
		openPicker(){
			if(!this.disabled){
				this.mask_show = true;
			}
		},
		closeMask() {
			this.mask_show = false;
		},
		changePick(e){
			this.value = this.nameKey?e[this.nameKey]:e;
			this.$emit("change", e);
			this.closeMask();
		}
	}
};
</script>

<style lang="scss" scoped>
.placeholder {
  color: #9d9da3;
}
.text {
  //font-size: 30rpx;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
  width: 200rpx;
  height: 100%;
}
.pick--view {
  width: 750rpx;
  background: #ffffff;
  border-radius: 16rpx 16rpx 0 0;
  overflow: hidden;
  .view__list {
    &--item {
      width: 750rpx;
      height: 114rpx;
      background: #ffffff;
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      color: #333333;
      text-align: center;
      line-height: 114rpx;
      border-bottom: 1rpx solid #f5f5f5;
    }
  }
  .view__line {
    width: 750rpx;
    height: 16rpx;
    background: #f5f5f5;
  }
  .view__cancel {
    width: 750rpx;
    height: 114rpx;
    background: #ffffff;
    font-size: 36rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #333333;
    line-height: 114rpx;
    text-align: center;
  }
}
</style>
